<template>
  <div class="mainBox">
    <div>
      <a-textarea :autoSize="{ minRows: 2, maxRows: 15 }" v-model:value="text" size="large"
        :maxlength="500"></a-textarea>
      <a-button @click="generateQRCode">生成二维码</a-button>
    </div>
    <canvas ref="qrCanvas"></canvas>
  </div>
</template>
<script setup>

import { ref, onMounted } from 'vue'
import QRCode from 'qrcode'

// onMounted(() => {
//   generateQRCode()
// })

const qrCanvas = ref(null)
const text = ref(`“习爷爷的话语充满感情与智慧，深深打动了我。”“收到习爷爷的复信，我太自豪了！”27日上午，阳光洒满阿联酋阿布扎比哈姆丹学校校园，孩子们用中文表达着欣喜，脸上洋溢着快乐与兴奋。
近日，阿联酋中文教学“百校项目”示范校哈姆丹学校和亚斯学校40名中小学生代表分别用中文致信习近平主席，表达对中国文化的向往和热爱，立志做中阿友好的使者。习近平主席在复信中勉励他们学好中文、了解中国，“把友谊的种子根植在心里，为开创中阿关系更加美好的明天贡献力量”。`)

const generateQRCode = () => {
  QRCode.toCanvas(qrCanvas.value, text.value, error => {
    if (error) console.error(error)
  })
}
</script>
<style>
.mainBox {
  box-sizing: border-box;
}
</style>